<template>
  <div>
    <myDivider name="房间管理"></myDivider>
    <div>
      <el-input class="findValue" v-model="query.name" placeholder="名称" @keyup.enter.native="getcompanyList"
        clearable></el-input>
      <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
        @click="getcompanyList">搜索</el-button>
      <div class="operation">
        <el-button type="success" icon="el-icon-plus" @click="openForm">新增</el-button>
      </div>
    </div>

    <div>
      <el-table :data="userData" style="width: 100%" class="menuTable" row-key="uid"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">


        <el-table-column prop="shortName" label="名称">
        </el-table-column>

        <el-table-column prop="superAdministratorName" label="超级管理员">
        </el-table-column>

        <el-table-column prop="type" label="机构类型">
          <template slot-scope="scope">
            <span>{{ scope.row.type == '1' ? '物业机构' : '其他机构' }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="fatherCompanyName" label="上级机构">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.fatherCompanyName" placement="top-start">
              <span>{{ scope.row.fatherCompanyName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="areaName" width="140px" label="所在地">
        </el-table-column>

        <el-table-column prop="contactName" label="联系人">
        </el-table-column>

        <el-table-column prop="telephoneNumber" label="联系电话">
        </el-table-column>

        <el-table-column prop="authenticationStatus" label="是否认证">
          <template slot-scope="scope">
            <span>{{ scope.row.authenticationStatus == '0' ? '未认证' : "已认证" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="280px" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="openDetailPage(scope.row)">详情</el-button>
            <!-- <el-button type="primary" icon="el-icon-connection" size="mini" @click="openBindingForm(scope.row)"></el-button> -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="echoValueForUpdate(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteAgencyById(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>


    <div class="pageFooterFather">
      <el-pagination v-if="totalSize > pageSize" background layout="prev, pager, next" :total="totalSize"
        @current-change="handleCurrentChange" class="pageFooter">
      </el-pagination>
    </div>


  </div>
</template>
  
<style lang="less" scoped>
.dialog {
  /deep/.el-dialog {
    width: 500px !important;
  }


}



.menuTable {
  margin-top: 100px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1300px;
  margin: 20px auto;

}

.formItemStyle {
  margin-bottom: 22px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}
</style>
  
  
  
<script>

import {
  getcompanyList,
  deleteinstInformation,

} from "./room";
import { timeYMD } from "@/utils/utils.js";

export default {
  data() {
    return {

      userData: [], //用户数据
      depmentManageData: [],
      allRoleListData: [],
      query: {
        //左上角查询input
        name: "",
      },
      reinsertForm: {
        // 新增弹框参数
        account: "",
        userName: "",
        status: "1",
        insertType: 0,

      },
    
      dialogFormVisible: false, //控制弹框开关
      formLabelWidth: "120px", //控制前面label的宽度
      pageNum: 0,
      pageSize: 10,
      totalSize: 0,
      props: {
        label: 'name',
        children: 'children',
        multiple: true
      },
    };
  },
  activated: function () {
    //刚进入页面加载
    this.getcompanyList();

  },
  mounted() {
  },
  methods: {


    //按条件查询菜单列表
    getcompanyList() {
      getcompanyList(
        this.query.name,
        "",
        this.pageNum,
        this.pageSize
      ).then((res) => {

        this.userData = res.list;
        // 遍历数据 如果数据为空就换为-
        this.userData.forEach(el => {
          for (let item in el) {
            if (el[item] == '' || el[item] == null) {
              el[item] = '-'
            }
          }
        });
        console.log(this.userData, '机构列表数据')
        this.pageNum = res.pageNum;
        this.pageSize = res.pageSize;
        this.totalSize = res.total;
      });
    },


    //弹出弹框并加载父级菜单
    openForm() {
      this.$router.push({ path: '/room/roomInsert' });

    },


    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.queryUserList();
    },
    forceChange() {
      this.$forceUpdate()
    },



    deleteAgencyById(row) {
      this.$confirm("确认删除该信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var id = row.id;
        deleteinstInformation(id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.$nextTick(() => {
              this.getcompanyList();
            })
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });
    },

    resetField() {
      this.reinsertForm.id = 0;
      this.dialogFormVisible = true;
      this.reinsertForm.userName = "";
      this.reinsertForm.gender = "0";
      this.reinsertForm.mobile = "";
      this.reinsertForm.email = "";
      this.reinsertForm.depId = "";
      this.reinsertForm.roleIds = [];
    },


    timeFormat(time) {
      return timeYMD(time);
    },

    echoValueForUpdate(row) {
      var id = row.id;
      this.$router.push({ path: '/room/roomInsert', query: { id: id, operateType: 'update' } })
    },


    //打开账号绑定窗口 并回显账号信息
    openBindingForm(row) {
      var id = row.id;
      this.$router.push({ path: '/room/roomBinding', query: { id: id, operateType: 'binding' } });
    },
    //打开账号绑定窗口 并回显账号信息
    openDetailPage(row) {
      var id = row.id;
      this.$router.push({ path: '/room/roomDetail', query: { id: id, operateType: 'binding' } });
    },


  },
};
</script>